<template>
    <div style="display: flex
;
    flex: 1;">
        <div id="" style="flex: 1" class="container">
        <card data-image="https://images.unsplash.com/photo-1479660656269-197ebb83b540?dpr=2&auto=compress,format&fit=crop&w=1199&h=798&q=80&cs=tinysrgb&crop=">
        <template #header>
            <h1>厚重</h1>
        </template>
        <template #content>
            <p>时间爬过了它的皮肤，留下了岁月的厚重</p>
        </template>
        </Card>
        <card data-image="https://images.unsplash.com/photo-1479659929431-4342107adfc1?dpr=2&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
        <template #header>
            <h1>平和</h1>
        </template>
        <template #content>
            <p>来自风和浪的抚慰</p>
        </template>
        </Card>
        <card data-image="https://images.unsplash.com/photo-1479644025832-60dabb8be2a1?dpr=2&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
        <template #header>
            <h1>落叶</h1>
        </template>
        <template #content>
            <p>小而美的意境，来自送别的礼物</p>
        </template>
        </Card>
        <card data-image="https://images.unsplash.com/photo-1479621051492-5a6f9bd9e51a?dpr=2&auto=compress,format&fit=crop&w=1199&h=811&q=80&cs=tinysrgb&crop=">
        <template #header>
            <h1>宁静</h1>
        </template>
        <template #content>
            <p>追寻来自内心与灵魂的渴望</p>
        </template>
        </Card>
    </div>
    </div>
</template>
<script>
import Card from '../components/Card.vue';

export default {
  components: {
    Card
  },
  data() {
    return {
      imageSrc: "https://images.unsplash.com/photo-1479660656269-197ebb83b540?dpr=2&auto=compress,format&fit=crop&w=1199&h=798&q=80&cs=tinysrgb&crop="
    };
  }
};
</script>

<style>
/* body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
} */
</style>